<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of Light Exerting Torque</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style setup ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2.5;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    // --- Draw Light Source (Square) ---
    const boxX = 80;
    const boxY = 150;
    const boxSize = 100;
    ctx.strokeRect(boxX, boxY, boxSize, boxSize);

    // --- Draw Light Beam ---
    const beamStartY = boxY + boxSize / 2;
    const beamStartX = boxX + boxSize;

    // Wavy part of the beam
    ctx.beginPath();
    ctx.moveTo(beamStartX, beamStartY);
    let currentX = beamStartX;
    const waveAmplitude = 10;
    const waveSegmentLength = 15;
    for (let i = 0; i < 5; i++) {
        const sign = (i % 2 === 0) ? -1 : 1;
        ctx.lineTo(currentX + waveSegmentLength, beamStartY + sign * waveAmplitude);
        currentX += waveSegmentLength;
    }

    // Straight part of the beam
    const targetCenterX = 420;
    const arrowTipX = targetCenterX - 40;
    ctx.lineTo(arrowTipX, beamStartY);
    ctx.stroke();

    // Arrowhead
    ctx.beginPath();
    ctx.moveTo(arrowTipX, beamStartY); // Tip
    ctx.lineTo(arrowTipX - 15, beamStartY - 8);
    ctx.lineTo(arrowTipX - 12, beamStartY); // Make it look solid
    ctx.lineTo(arrowTipX - 15, beamStartY + 8);
    ctx.closePath();
    ctx.fill();

    // --- Draw Target and Axle ---
    const targetCenterY = beamStartY;
    const targetRadiusX = 30;
    const targetRadiusY = 60;

    // Axle (drawn first to be behind the target)
    ctx.beginPath();
    ctx.moveTo(targetCenterX - targetRadiusX, targetCenterY);
    ctx.lineTo(targetCenterX + 120, targetCenterY);
    ctx.stroke();

    // Target (Ellipse)
    ctx.beginPath();
    ctx.ellipse(targetCenterX, targetCenterY, targetRadiusX, targetRadiusY, 0, 0, 2 * Math.PI);
    ctx.stroke();


    // --- Draw Labels ---
    // Using a font that mimics a hand-drawn style
    ctx.font = "24px 'Comic Sans MS', cursive, sans-serif";
    ctx.textAlign = 'left';

    // "light" label
    ctx.fillText("light", 220, 175);

    // "axle" label
    ctx.fillText("axle", targetCenterX + 130, targetCenterY + 8);

    // "target" label
    ctx.textAlign = 'center';
    ctx.fillText("target", targetCenterX, targetCenterY + targetRadiusY + 25);
    
    // Figure caption
    ctx.font = "bold 24px 'Times New Roman', serif";
    ctx.fillText("Fig. 2.84", canvas.width / 2, 400);

</script>
</body>
</html>